<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <link rel="shortcut icon" href="#">
  <title>管理员登录</title>
  <style></style>
</head>
<body>
  <h1>管理员登录</h1>
  <hr>
  <input type="text" placeholder="管理员登录" id="adminuser"><br>
  <input type="password" placeholder="密码" id="adminpwd"><br>
  <button id="btn">登录</button>
  <!-- 脚本 -->
  <script>
    //1获取3个元素
    var adminuser = document.getElementById('adminuser');
    var adminpwd = document.getElementById('adminpwd');
    var btn = document.getElementById('btn');
    //2触发事件
    btn.onclick = function(){
      //3、收集用户数据
      var namesval = adminuser.value.trim();
      var pwdval = adminpwd.value.trim();
      //4判断两个不为空
      if(namesval && pwdval){
        //5调用ajax函数
        ajax(namesval,pwdval)
      }else{
        alert('用户名和密码不能为空')
      }
    }
    //Ajax函数
    function ajax(n,m){
      var xhr = new XMLHttpRequest();
      xhr.onreadystatechange = function(){
        if(xhr.readyState==4){
          if(xhr.status >=200 && xhr.status<300){
            console.log(xhr.responseText)
            var result = JSON.parse(xhr.responseText);
            if(result.code){
              alert('登录成功');
              window.location.href="./list.html"
            }else{
              alert('用户名或密码错误');
            }
          }
        }
      }
      xhr.open('post','/admin/Login',true)
      //请求头
      xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
      xhr.send(`anames=${n}&apwd=${m}`);
    }

  </script>
</body>
</html>